<template>
	<view class="app-product-list" >
		<template v-if="list.length > 0">
			<view class="app-item" :class="{'app-item-border': index !== list.length - 1}" v-for="(item, index) in list" :key="index">
				<app-jump-button @click.native="route_go(item)">
					<view class="out-dialog" v-if="item.goods_stock == 0 && appSetting.is_show_stock == '1'">
						<image :src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic"></image>
					</view>
					<image class="app-image" :src="item.cover_pic"></image>
					<view class="app-content dir-top-nowrap main-left cross-top">
						<view class="app-name">{{item.name}}</view>
						<view class="app-group">已团{{item.virtual_sales}}件</view>
						<view class="app-price-button dir-left-nowrap main-between cross-bottom">
							<view class="price dir-top-nowrap main-right">
								<view class="member-price" v-if="item.is_level == 1 && item.level_price != -1" style="height: 32rpx;">
									<app-member-price :price="item.level_price"></app-member-price>
								</view>
								<app-sup-vip :is_vip_card_user="item.vip_card_appoint.is_vip_card_user" margin="4rpx 0 0" v-if="item
                    		.vip_card_appoint.discount > 0" :discount="item.vip_card_appoint.discount"></app-sup-vip>
								<view class="app-price dir-left-nowrap cross-bottom">
									<text class="app-symbol app-now-price" v-if="item.price > 0">{{item.price}}</text>
									<text class="app-now-price" v-else>免费</text>
									<text class="app-symbol app-old-price">{{item.original_price}}</text>
								</view>
							</view>
							<view v-if="item.goods_stock == 0" style="background: #DCDCDC;color: #fff" class="app-button">已售罄</view>
							<view v-else class="app-button">去开团</view>
						</view>
					</view>
				</app-jump-button>
			</view>
		</template>
		<template v-if="list.length === 0">
			<app-no-goods background="#f7f7f7"></app-no-goods>
		</template>
	</view>
</template>

<script>
    import {mapState, mapGetters} from 'vuex';
	import appMemberPrice from "../../../components/page-component/app-member-mark/app-member-price.vue";
    import appSupVip from "../../../components/page-component/app-sup-vip/app-sup-vip.vue";
    import appNoGoods from '../../../components/page-component/app-no-goods/app-no-goods.vue';
    
    export default {
        name: 'app-product-list',
		components: {
            'app-member-price': appMemberPrice,
            'app-sup-vip': appSupVip,
			'app-no-goods': appNoGoods,
		},
        computed: {
            ...mapState({
            	appSetting: state => state.mallConfig.mall.setting,
                appImg: state => state.mallConfig.__wxapp_img.mall
            }),
            // #ifndef MP-BAIDU
            ...mapGetters('mallConfig',{
                getVideo: 'getVideo'
            }),
            // #endif
        },
        props: {
            list: {
                type: Array,
                default() {
                    return [];
                }
            },
			sign: String,
        },

		methods: {
			route_go(data) {
			    console.log(data)
				// #ifndef MP-BAIDU
				if (data.video_url && this.getVideo == 1) {
					uni.navigateTo({
						url: `/pages/goods/video?goods_id=${data.id}&sign=${this.sign}`
					});
				} else {
					uni.navigateTo({
						url: `/plugins/pt/goods/goods?goods_id=${data.id}`,
					});
				}
				// #endif

				// #ifdef MP-BAIDU
				uni.navigateTo({
					url: `/plugins/pt/goods/goods?goods_id=${data.id}`,
				});
				// #endif
			}
		}
    }
</script>

<style scoped lang="scss">
	.app-product-list {
		width: #{750rpx};
		background-color: white;
		.app-item-border {
			border-bottom: #{1rpx} solid #e2e2e2;
		}
		.app-item {
			padding: #{24rpx};
            .out-dialog {
                width: #{220rpx};
                height: #{220rpx};
                position: absolute;
                top: 0;
                left: 0;
                z-index: 10;
                background-color: rgba(0,0,0,.5);
                image {
                    width: #{220rpx};
                    height: #{220rpx};
                }
            }
			.app-image {
				width: #{220rpx};
				height: #{220rpx};
				border-radius: #{4rpx};
			}
			.app-content {
				width: #{458rpx};
				height: #{220rpx};
				margin-left: #{24rpx};
				position: relative;
				.app-name {
					font-size: #{28rpx};
					color: #353535;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					margin-top: #{8rpx};
				}
				.app-group {
					font-size: #{22rpx};
					color: #ff4544;
				}
				.app-price-button {
					position: absolute;
					bottom: #{10rpx};
					width: #{458rpx};
					height: #{105rpx};
					.price {
						width: #{458-180rpx};
						height: #{105rpx};
						.member-price {
						
						}
						.app-price {
						
						}
					}
					.app-button {
						font-size: #{26rpx};
						color: #ffffff;
						width: #{180rpx};
						height: #{64rpx};
						line-height: #{64rpx};
						text-align: center;
						/* #ifndef MP-TOUTIAO */
						padding: 0 #{49rpx};
						/* #endif */
						border-radius: #{32rpx};
						background: linear-gradient(140deg, #ffa360, #ff5c5c);
					}
					.app-now-price {
						color: #ff4544;
						font-size: #{30rpx};
						margin-right: #{12rpx};
					}
					.app-old-price {
						font-size: #{25rpx};
						color: #999999;
						text-decoration:line-through;
					}
					.app-symbol:before {
						content: '￥';
						font-size: #{16rpx};
					}
				}
			}
		}
	}
</style>